@charset'UTF-8';
 /**
 * pk
 * @Author river
 * @email lijiang@ymatou.com
 * @Date 2015/10/12
 */
 @import'../_components/variables.scss';
 @import'../_components/_mixin.scss';
 @import'../_components/reset.scss';
 @import'../assets/_pk.scss';
 $rem: 1rem/32;
 $left_color: #ff4b7a;
 $right_color: #2e95ff;
 .pk-wrapper {
     position: relative;
     overflow: hidden;
     padding-bottom: $rem*40;
     background-image: url();
     background-size: 100%;
     box-shadow: 0 0 $rem*20 #444;
     background-repeat-x: no-repeat;
 }
 .pk-header {
     text-align: center;
     img {
         max-width: 100%;
     }
 }
 .pk-banner-img {
     width: 100%;
     height: $rem*652;
     background: url(/images/header_bg.png) no-repeat center 0;
     background-size: contain;
 }
 .pk-start-wrapper {
     width: 100%;
     height: $rem*110;
     text-align: center;
     background: url(/images/start.png) no-repeat center 0;
     background-size: contain;
     img {
         max-width: 80%;
     }
 }
 //pk详情
 .pk-status-header {
     font-size: $rem*28;
     margin-bottom: $rem*28;
     padding: $rem*16 0;
     text-align: center;
     background: #fffd34;
     &.succ {
         background-image: url(/images/start_bg.png);
         background-repeat: no-repeat;
         background-position: center bottom;
         background-size:contain;
         .text {
             color: #ff0043;
         }
     }
     .text {
         display: inline-block;
         padding: $rem*16 $rem*10;
         background: url(/images/detail_bg.png) no-repeat;
         background-size: 100% 100%;
     }
 }
 .pk-left-wrapper, .pk-right-wrapper {
     float: left;
     width: 50%;
     padding: 0 $rem*16;
 }
 .pk-pro-wrapper {
     //padding:0 5%;
 }
 //pk商品名称
 .pk-pro-title {
     line-height: 1;
     padding: $rem*7 $rem*14;
     text-align: center;
     background: url(/images/product_title.png) no-repeat;
     background-size: 100% 100%;
     h3 {
         font-size: $rem*24;
         line-height: 1;
         height:$rem*24;
         overflow:hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         color: $left_color;
     }
     span {
         font-size: $rem*14;
         height:$rem*18;
         overflow:hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         width:100%;
         display:block;
         color: #2a1600;
         line-height: 1.5;
     }
 }
 .pk-pro-sling {
     line-height: 0;
     overflow: hidden;
     height: $rem*18;
     padding: 0 $rem*18;
     & > :first-child {
         float: left;
     }
     & > :last-child {
         float: right;
     }
 }
 .pk-sling {
     position: relative;
     display: inline-block;
     width: $rem*2;
     height: 100%;
     background: #000;
     &:before, &:after {
         position: absolute;
         left: -100%;
         display: block;
         width: $rem*6;
         height: $rem*6;
         content:'';
         border-radius: 50%;
         background: #000;
     }
     &:before {
         top: $rem*-3;
     }
     &:after {
         bottom: $rem*-3;
     }
 }
 .pk-pro-body {
     position: relative;
     padding: $rem*20 $rem*24;
     text-align: center;
     border: $rem*2 solid #000;
     border-radius: $rem*8;
     background: #fff;
     &.win {
         &:after {
             position: absolute;
             top: $rem*5;
             width: $rem*91;
             height: $rem*84;
             content:'';
             background: url(/images/win.png) no-repeat;
             background-size: contain;
         }
     }
     & > img {
         max-width: 100%;
         min-height:$rem*236;
     }
 }
 .pk-pro-info {
     //padding:0 $rem*24;
     text-align: left;
     & > .country {
         font-size: $rem*18;
         color: #2a1600;
         img {
             width: $rem*29;
             height: $rem*29;
             margin-right: $rem*7;
             vertical-align: middle;
         }
     }
     & > .price {
         font-size: $rem*36;
         float: right;
         color: $left_color;
     }
 }
 .pk-vote-show {
     font-size: $rem*17;
     line-height: $rem*75;
     position: relative;
     //overflow: hidden;
     height: $rem*75;
     text-align: center;
     color: #fff;
     .pk-sling-wrapper {
         position: absolute;
         top: 0;
         height: 100%;
         &:first-child {
             left: $rem*35;
         }
         &:last-child {
             right: $rem*35;
             height: $rem*95;
         }
     }
 }
 .pk-recommend-reason {
     //padding:0 $rem*35;
 }
 /* .pk-vote-wrapper{
  font-size:$rem*36;
  color:$left_color;
} */
 .pk-vote {
     &-wrapper {
         overflow: hidden;
         margin-bottom: $rem*35;
         .pk-succ-vote {
             display: none;
             width: 100%;
             height: $rem*102;
             background: url(/images/vote_succ_left.png) no-repeat;
             background-size: 100% 100%;
         }
         .pk-vote-num {
             font-size: $rem*38;
             color: #fff;
         }
         .pk-vote-col {
             padding: 0 $rem*14;
             text-align: center;
         }
         &.column-vote-group {
             .pk-vote-col {
                 float: left;
                 width: 50%;
                 text-align: left;
             }
         }
         .pk-vote {
             display: block;
             width: $rem*285;
             height: $rem*80;
             margin: 0 auto;
             background-repeat: no-repeat;
             background-size: contain;
             &.pk-vote-left {
                 background-image: url(/images/vote_left.png);
             }
             &.pk-vote-right {
                 background-image: url(/images/vote_right.png);
             }
             &.pk-see-pro-left {
                 background-image: url(/images/vote_detail_left.png);
             }
             &.pk-see-pro-right {
                 background-image: url(/images/vote_detail_right.png);
             }
         }
         &.left-vote-group, &.right-vote-group {
             .pk-vote {
                 display: none;
             }
             .right-vote {
                 display:block;
             }
         }
         &.left-vote-group, &.right-vote-group {
             .left-vote {
                 display: block;
                 img {
                     width: 100%;
                 }
             }
         }
         &.right-vote-group {
             .pk-succ-vote {
                 background-image: url(/images/vote_succ_right.png);
             }
         }
     }
 }
 .pk-recommend-info {
     .title {
         position: relative;
         height: $rem*78;
         margin-bottom: $rem*18;
         background: url(/images/rec_reason_left.png) no-repeat;
         background-size: 100% 100%;
         img {
             position: absolute;
             top: $rem*11;
             left: $rem*9;
             width: $rem*55;
             height: $rem*55;
             border: $rem solid #000;
             border-radius: 50%;
         }
     }
 }
 .pk-recommend-desc {
     font-size: $rem*24;
     margin-bottom: $rem*42;
     padding: 0 $rem*30;
     color: #fff;
 }
 .pk-outer-wrapper {
     padding: $rem*22 $rem*14;
     background-color: #fffd34;
     background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 1)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(0, 0, 0, 1)), color-stop(.75, rgba(0, 0, 0, 1)), color-stop(.75, transparent), to(transparent));
     background-size: $rem*120 $rem*120;
     /* 控制条纹的大小 */
 }
 //规则
 .pk-rule {
     font-size: $rem*20;
     text-align: center;
     &-header, &-footer {
         background-repeat: no-repeat;
         background-size: 100% 100%;
     }
     &-header {
         height: $rem*64;
         background-image: url(/images/rule_header_bg.png);
     }
     &-body {
         padding: $rem*12 $rem*40;
         background-image: url(/images/rule_body_bg.png);
         background-size: 100%;
         background-repeat-x: no-repeat;
         &.open {
             .rule-content {
                 &>p, &>ul {
                     display:block;
                 }
             }
         }
     }
     &-footer {
         height: $rem*15;
         background-image: url(/images/rule_footer_bg.png);
     }
     .rule-content {
         text-align:left;
         &.textflow {
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
         }
         &>p, &>ul {
             display:none;
         }
     }
     small {
         font-size: $rem*16;
     }
 }
 //往期
 .pk-past {
     padding: 0 $rem*14;
     text-align: center;
     &-header, &-footer {
         background-repeat: no-repeat;
         background-size: 100% 100%;
     }
     &-header {
         height: $rem*147;
         background-image: url(/images/arena_header_bg.png);
     }
     &-footer {
         height: $rem*12;
         background-image: url(/images/arena_footer_bg.png);
     }
     &-body {
         font-size: $rem*18;
         overflow: hidden;
         //background:#fff;
         //border:$rem*2 solid #000;
         padding: $rem*10 $rem*30;
         background-image: url(/images/arena_body_bg.png);
         background-size: 100%;
         background-repeat-x: no-repeat;
         .pro-pic-wrapper {
             position: relative;
             float: left;
             margin-right: $rem*17;
             & > :first-child {
                 margin-right: $rem*20;
             }
             &.pk-flag {
                 &:after {
                     top: 50%;
                     width: $rem*66;
                     height: $rem*65;
                     transform: translate(-50%, -50%);
                     -webkit-transform: translate(-50%, -50%);
                 }
             }
             .pro-pic {
                 width: $rem*94;
                 height: $rem*94;
                 border: $rem*2 solid #000;
                 border-radius: $rem*6;
             }
         }
     }
     &-list {
         margin-top: $rem*20;
     }
     &-pro {
         position: relative;
         overflow: hidden;
         margin-bottom: $rem*27;
         padding-right: $rem*35;
         height:$rem*96;
         & > .title {
             text-align: left;
             //height:$rem*54;
             font-size:$rem*18;
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
         }
     }
     &-more {
         position: absolute;
         top: 50%;
         right: 0;
         width: $rem*20;
         height: $rem*30;
         transform: translate(0, -50%);
         background: url() no-repeat;
         background-size: contain;
     }
 }
 .pk-flag {
     position: relative;
     //pk 标志
     &:after {
         position: absolute;
         z-index: 2;
         top: $rem*180;
         left: 50%;
         display: block;
         width: $rem*126;
         height: $rem*123;
         content:'';
         transform: translate(-50%, 0);
         background: url(/images/pk.png) no-repeat;
         background-size: 100% 100%;
     }
     &.pk-flag-fade{
         &:after{
            background-image: url(/images/pk_flag_2.png);
        }
     }
 }
 .pk-info-wrapper {
     position: relative;
     overflow: hidden;
 }
 .pk-left-wrapper {
     .pk-pro-body {
         &.win {
             &:after {
                 left: $rem*5;
             }
         }
     }
 }
 .pk-right-wrapper {
     .pk-vote-wrapper {
         color: #2e95ff;
     }
     .pk-pro-title {
         h3 {
             color: $right_color;
         }
     }
     .pk-pro-info {
         .price {
             color: $right_color;
         }
     }
     .pk-recommend-info {
         .title {
             background-image: url(/images/rec_reason_right.png);
         }
     }
     .pk-pro-body {
         &.win {
             &:after {
                 right: $rem*5;
             }
         }
     }
 }
 .pk-load-over {
     padding: $rem*25 0;
     text-align: center;
     background: #fffe34;
     &:after {
         display: inline-block;
         content:'';
         width: $rem*90;
         height: $rem*40;
         background: url(/images/load_over.png) no-repeat;
         background-size: contain;
     }
 }
 //回到顶部
 .pk-back-top {
     position: fixed;
     right: $rem*30;
     bottom: $rem*15;
     display: none;
     width: $rem*70;
     height: $rem*70;
     transition: display .25s ease-in-out;
     background: url() no-repeat;
     background-size: contain;
 }
 //投票记录
 .pk-record {
     position: fixed;
     top: 25%;
     display: none;
     &-close {
         position: fixed;
         top: 25%;
         right: 0;
         display: none;
         width: $rem*60;
         height: $rem*60;
         background: url() no-repeat;
         background-size: contain;
         &.open {
             display: block;
         }
     }
     &.open {
         right: $rem*30;
         display: block;
     }
     &-header, &-footer {
         background-repeat: no-repeat;
         background-size: 100% 100%;
     }
     &-header {
         position: relative;
         height: $rem*13;
         background-image: url(/images/record_header_bg.png);
         .close-btn {
             line-height: $rem*33;
             position: absolute;
             top: $rem*-15;
             right: $rem*-5;
             width: $rem*33;
             height: $rem*33;
             text-align: center;
             color: #fff;
             border-radius: 50%;
             background: #d4d4d5;
         }
     }
     &-footer {
         height: $rem*13;
         background-image: url(/images/record_footer_bg.png);
     }
     &-body {
         font-size: $rem*16;
         padding: 0 $rem*10;
         text-align: center;
         background-image: url(/images/record_body_bg.png);
         background-size: 100%;
         background-repeat-x: no-repeat;
         strong {
             color: #f00;
         }
         & > hr {
             margin: 0;
         }
     }
 }
 //遮罩
 .pk-mask {
     position: fixed;
     z-index: 99;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     display: none;
     background: rgba(0, 0, 0, .7);
     &.open {
         display: block;
     }
 }
 .pk-dialog {
     position: fixed;
     z-index: 100;
     top: 50%;
     left: 50%;
     display:none;
     width: 95%;
     height: $rem*280;
     transform: translate(-50%, -50%);
     background: url(/images/vote_confirm.png) no-repeat;
     background-size:contain;
     &-body {
         font-size: $rem*26;
         line-height: 1.2;
         width: $rem*300;
         height: $rem*180;
         margin: 0 auto;
         padding-top: $rem*50;
         text-align: center;
         strong {
             display: block;
             overflow: hidden;
             max-height: $rem*60;
             color: $left_color;
         }
     }
     &-footer {
         position: relative;
         width: $rem*428;
         height: $rem*70;
         margin: 0 auto;
         .left-btn, .right-btn {
             position: absolute;
             top: 10px;
             width: $rem*186;
             height: $rem*56;
         }
         .right-btn {
             right: 0;
         }
     }
 }
 //分享页
 .pk-vie-info {
     overflow: hidden;
     margin-bottom: $rem*20;
     padding: $rem*20;
     background: #fff;
 }
 .pk-vie-pic {
     float: left;
     width: $rem*118;
     height: $rem*116;
     margin-right: $rem*20;
     background: url(/images/spoils.png) no-repeat;
     background-size: 100% 100%;
     img {
         max-width: $rem*107;
         max-height: $rem*105;
         margin-top: $rem*3;
         margin-left: $rem*3;
         border-radius: 50%;
     }
 }
 .pk-vie-text {
     margin-bottom: $rem*20;
     h3 {
         font-size: $rem*30;
         color: #1b1b1b;
         strong {
             color: #f00;
         }
     }
     p {
         font-size: $rem*18;
         color: #434343;
     }
 }
 //如何参加
 /*.pk-flow {
     &-text {
         font-size: $rem*18;
         padding: $rem*20 0;
         text-align: center;
         color: #666;
         border-bottom: $rem solid #ddd;
         h3 {
             font-size: $rem*24;
             color: #434343;
         }
     }
     &-pics {
         overflow: hidden;
         padding: $rem*30 $rem*22;
         padding-right: 0;
         border-bottom: $rem solid #ddd;
         background: #f7f7f7;
     }
     &-item {
         font-size: $rem*18;
         float: left;
         width: 33.33333%;
         height: $rem*378;
         text-align: center;
         color: #666;
         & > div {
             padding-right: $rem*22;
         }
         img {
             width: 100%;
             height: $rem*323;
             margin-bottom: $rem*14;
             background-color: #b0b0b0;
         }
     }
 }*/
 //下载
 .pk-download {
     display: block;
     padding: $rem*16 0;
     text-align: center;
     border-top: $rem solid #ddd;
     background: #fff;
     &:before {
         display: inline-block;
         width: $rem*442;
         height: $rem*72;
         content:'';
         background: url(/images/download.png) no-repeat;
         background-size: contain;
     }
 }
 //pk 动态
 .pk-dynamics {
     width:100%;
     height:100%;
     overflow:hidden;
     &-list {
         height: 100%;
         transition: transform 0.25s ease-in-out;
     }
 }
 .pk-seeMore {
     &:after {
         content:'';
         background:url() no-repeat;
         display:inline-block;
         background-size:contain;
         width:$rem*14;
         height:$rem*7;
         transition: transform .25s ease-in-out;
         vertical-align: middle;
     }
     &.handstand {
         &:after {
             transform: rotate(180deg);
         }
     }
 }
